<template>
  <div :style="nodeData.style" @mousedown="handleMouseDown" class="box">
    <div
      class="content"
      :style="{
        backgroundColor: nodeData.currentStyle.fill,
        borderRadius: '30px'
      }"
    >
      <div
        style="
          width: 10%;
          height: 10%;
          background-color: green;
          margin-left: 20px;
        "
      ></div>
      <img
        width="20%"
        height="25%"
        src=""
        alt=""
      />
    </div>
  </div>
</template>
<script>
import mixin from './mixin'
export default {
  name: 'TestCom3',
  mixins: [mixin],
  data() {
    return {
      nodeData: {
        shape: 'TestCom3', //节点名称，不能重复,必须要跟组件名称一致，不然找不到组件导入
        //节点数据
        createNodeDescribe: true,
        // 普遍样式
        currentStyle: {
          fill: 'none',
          stroke: '#000',
          strokeWidth: 2
        },
        isDropEnd: false,
        width: 100,
        height: 100,
        // 其他样式
        style: {}
      }
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style scoped lang="less">
.box {
  width: 100%;
  height: 100%;
  cursor: move;
  svg {
    width: 100%;
    height: 100%;
  }
  .content {
    width: 100%;
    height: 100%;
    border: 1px solid #000;
  }
}
</style>
